<template>
  <main class="flex flex-col gap-[20px] pb-[60px]">
    <var-skeleton title :rows="3" :loading="loading" :rows-width="['200px', '100px', '50px']">
      <section class="bg-white px-[3.733333vw] pt-[15.5px]" v-for="i in errorTopic" :key="i.key">
        <h1 class="text-[17px] text-[#545454] flex justify-between items-center">
          <span class="w-[60vw] truncate"> {{ i.test_name }} </span>
          <span class="text-[12px]"> 耗时：{{ i.consume_time }} 分钟 </span>
        </h1>
        <div class="text-[14px]"> </div>
        <main v-if="i.single_wrong.length">
          <h2 class="text-[14px] my-[15.5px]"> 单项选择题 </h2>
          <section
            v-for="(singles, singlesIndex) in i.single_wrong"
            :key="singles.sinigle + i.test_name"
            class="mt-[16.5px]"
          >
            <template v-if="singles.single">
              <header class="text-[15px] w-[86vw] truncate">
                {{ singlesIndex + 1 }}. {{ singles.single.single_name }} ({{
                  singles.single.right_key
                }})
              </header>
              <var-collapse v-model="value">
                <var-collapse-item title="本题选项" :name="singles.single.key + i.test_name">
                  <p class="truncate text-[15px] w-[86vw]"> A.{{ singles.single.A }} </p>
                  <p class="truncate text-[15px] mt-[6px] w-[86vw]"> B.{{ singles.single.B }} </p>
                  <p class="truncate text-[15px] mt-[6px] w-[86vw]"> C.{{ singles.single.C }} </p>
                  <p class="truncate text-[15px] mt-[6px] w-[86vw]"> D.{{ singles.single.D }} </p>
                </var-collapse-item>
              </var-collapse>
              <footer class="pl-[12px] text-[15px]">
                你的答案：<span class="text-red-600">{{ singles.wrong_key }}</span>
              </footer>
              <var-divider />
            </template>
          </section>
        </main>
        <main v-if="i.selection_wrong.length">
          <h2 class="text-[14px] my-[15.5px]"> 多选题 </h2>
          <section
            v-for="(selection, selectionIndex) in i.selection_wrong"
            :key="selection.selection + i.test_name"
            class="mt-[16.5px]"
          >
            <template v-if="selection.selection">
              <header class="text-[15px] w-[86vw] truncate">
                {{ selectionIndex + 1 }}. {{ selection.selection.selection_name }} ({{
                  selection.selection.right_key.join(',')
                }})
              </header>
              <var-collapse v-model="value">
                <var-collapse-item title="本题选项" :name="selection.selection.key + i.test_name">
                  <p class="truncate text-[15px] w-[86vw]"> A.{{ selection.selection.A }} </p>
                  <p class="truncate text-[15px] mt-[6px] w-[86vw]">
                    B.{{ selection.selection.B }}
                  </p>
                  <p class="truncate text-[15px] mt-[6px] w-[86vw]">
                    C.{{ selection.selection.C }}
                  </p>
                  <p class="truncate text-[15px] mt-[6px] w-[86vw]">
                    D.{{ selection.selection.D }}
                  </p>
                </var-collapse-item>
              </var-collapse>
              <footer class="pl-[12px] text-[15px]">
                你的答案：<span class="text-red-600">
                  {{ Myeval(selection.wrong_key).join(',') }}
                </span>
              </footer>
              <var-divider />
            </template>
          </section>
        </main>
        <main v-if="i.judge_wrong.length">
          <h2 class="text-[14px] my-[15.5px]"> 判断题 </h2>
          <section
            v-for="(judge, judgeIndex) in i.judge_wrong"
            :key="judge.judge + i.test_name"
            class="mt-[16.5px]"
          >
            <template v-if="judge.judge">
              <header class="text-[15px] w-[86vw] truncate">
                {{ judgeIndex + 1 }}. {{ judge.judge.judge_name }} ({{
                  judge.judge.right_key === '1' || judge.judge.right_key === 1 ? '对' : '错'
                }})
              </header>
              <footer class="pl-[12px] text-[15px] mt-[10px]">
                你的答案：<span class="text-red-600">
                  {{ judge.wrong_key === '1' || judge.wrong_key === 1 ? '对' : '错' }}
                </span>
              </footer>
              <var-divider />
            </template>
          </section>
        </main>
      </section>
    </var-skeleton>
  </main>
</template>

<script setup lang="ts">
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import { getStudentErrorTopic } from '@/api/user';

  const Myeval = eval;
  let loading = ref(true);
  const router = useRouter();
  let errorTopic = ref<any[]>([]);
  const getCurrentStudentErrorTopic = async () => {
    const { getUserId } = storeToRefs(useUserInfoStoreWithOut());
    try {
      const { data } = await getStudentErrorTopic(getUserId.value);
      errorTopic.value = data.map((item) => ({
        ...item,
        judge_wrong: item.judge_wrong,
        selection_wrong: item.selection_wrong,
        single_wrong: item.single_wrong,
      }));
      errorTopic.value = errorTopic.value.filter(
        (item) =>
          item.judge_wrong.length !== 0 ||
          item.selection_wrong.length !== 0 ||
          item.single_wrong.length !== 0
      );
      console.log(errorTopic.value);
    } catch {
      router.back();
    }
    loading.value = false;
  };
  getCurrentStudentErrorTopic();

  let value = ref([]);
</script>

<style scoped>
  :deep(.var-collapse-item__header-title) {
    font-size: 15px;
  }
</style>
